<template>
  <v-card outlined fill-height width="100%">
    <v-card-title>{{ report.id ? "编辑" : "新增" }}报告</v-card-title>
    <v-card-actions>
      <v-btn color="primary" @click.stop="onSave">保存</v-btn>
      <v-btn
        color="primary"
        :disabled="!report.id"
        :loading="downloading"
        @click.stop="genReport"
        >生成报告书</v-btn
      >
    </v-card-actions>
    <v-card-text>
      <ReportTargetSelector v-model="item.target"></ReportTargetSelector>
      <v-list>
        <v-list-group :value="true">
          <template v-slot:activator>
            <v-list-item two-line>
              <v-list-item-content>
                <v-list-item-title>报告人信息</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
          <ReportUserInfo :item="item.user_info"> </ReportUserInfo>
        </v-list-group>
        <v-list-group :value="true">
          <template v-slot:activator>
            <v-list-item two-line>
              <v-list-item-content>
                <v-list-item-title>指纹配置</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
          <v-row dense v-for="(fingerinput, i) in item.finger_inputs" :key="i">
            <v-col cols="12">
              <span
                >{{ fingerinput.handside == "left" ? "左手" : "右手"
                }}{{ fingerinput.finger_index }}</span
              >
            </v-col>
            <v-col cols="4">
              <FingerClassifyEnumSelector
                v-model="fingerinput.finger_class"
              ></FingerClassifyEnumSelector>
            </v-col>
            <v-col cols="4">
              <v-autocomplete
                v-model="fingerinput.active_state"
                :items="['主动', '被动', '逆向', '开放', '反射']"
                label="活跃状态"
                placeholder="活跃状态"
                outlined
                :multiple="false"
                dense
              ></v-autocomplete>
            </v-col>
            <v-col cols="4">
              <v-autocomplete
                v-model="fingerinput.active_order"
                :items="['强', '中等', '偏弱']"
                label="活跃级别"
                placeholder="活跃级别"
                outlined
                :multiple="false"
                dense
              ></v-autocomplete>
            </v-col>
            <v-col cols="6">
              <v-text-field
                outlined
                dense
                label="指纹量化值"
                type="number"
                v-model.number="fingerinput.quant_value"
              ></v-text-field>
            </v-col>
            <v-col cols="6">
              <v-text-field
                outlined
                dense
                label="排序"
                type="number"
                v-model.number="fingerinput.order_index"
              ></v-text-field>
            </v-col>
          </v-row>
          <h5>脑细胞数值(自动计算):</h5>
          <v-row dense>
            <v-col cols="12">
              <v-text-field
                outlined
                dense
                label="脑细胞总值"
                readonly
                disabled
                :value="TRC"
              ></v-text-field>
            </v-col>
          </v-row>
          <v-row dense>
            <v-col cols="6">
              <v-text-field
                outlined
                dense
                label="左脑比例"
                readonly
                disabled
                suffix="%"
                :value="leftTRCPercent"
              ></v-text-field>
            </v-col>
            <v-col cols="6">
              <v-text-field
                outlined
                dense
                label="右脑比例"
                readonly
                disabled
                suffix="%"
                :value="rightTRCPercent"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-list-group>
        <v-list-group :value="true">
          <template v-slot:activator>
            <v-list-item two-line>
              <v-list-item-content>
                <v-list-item-title>其他配置</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
          <v-row dense>
            <v-col cols="12">
              <v-text-field
                outlined
                dense
                label="ATD角度"
                type="number"
                v-model="item.ATD"
              ></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field
                outlined
                dense
                readonly
                disabled
                label="先天潜能学习敏感度(自动计算)"
                :value="getLearnSenstive(item.ATD)"
              ></v-text-field>
            </v-col>
          </v-row>
          <h5>附加潜能</h5>

          <v-row dense>
            <v-col cols="12" sm="6" md="6">
              <v-radio-group v-model="item.additional_potentail.class_A" row>
                附加潜能A：
                <v-radio
                  v-for="(item, i) in ['无', '音', '√']"
                  :key="i"
                  :label="item"
                  :value="item"
                ></v-radio>
              </v-radio-group>
            </v-col>
          </v-row>
          <v-row dense>
            <v-col cols="12" sm="6" md="6">
              <v-radio-group v-model="item.additional_potentail.class_B" row>
                附加潜能B：
                <v-radio
                  v-for="(item, i) in ['无', '√']"
                  :key="i"
                  :label="item"
                  :value="item"
                ></v-radio>
              </v-radio-group>
            </v-col>
          </v-row>
          <v-row dense>
            <v-col cols="12" sm="6" md="6">
              <v-radio-group v-model="item.additional_potentail.class_C" row>
                附加潜能C：
                <v-radio
                  v-for="(item, i) in ['无', 'S', 'V', 'M']"
                  :key="i"
                  :label="item"
                  :value="item"
                ></v-radio>
              </v-radio-group>
            </v-col>
          </v-row>
          <v-row
            dense
            v-for="(class_name, i) in [
              'class_D',
              'class_E',
              'class_F',
              'class_broken',
            ]"
            :key="i"
          >
            <v-col cols="12" sm="6" md="6">
              <v-radio-group
                v-model="item.additional_potentail[class_name]"
                row
              >
                {{ getAdditionalPotentailLabel(class_name) }}
                <v-radio
                  v-for="(item, i) in ['无', '√']"
                  :key="i"
                  :label="item"
                  :value="item"
                ></v-radio>
              </v-radio-group>
            </v-col>
          </v-row>
        </v-list-group>
        <v-list-group :value="true">
          <template v-slot:activator>
            <v-list-item two-line>
              <v-list-item-content>
                <v-list-item-title>先天属性</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
          <v-radio-group
            v-model="item.learn_trait"
            row
          >
            {{ getLearnTraitLabel() }}：
            <v-radio
              v-for="(item, i) in LearnTraitList"
              :key="i"
              :label="item"
              :value="item"
            ></v-radio>
          </v-radio-group>
          <v-radio-group
            v-model="item.learn_type"
            row
          >
            先天学习类型：
            <v-radio
              v-for="(item, i) in LearnTypeList"
              :key="i"
              :label="item"
              :value="item"
            ></v-radio>
          </v-radio-group>
        </v-list-group>
        <v-list-group :value="true">
          <template v-slot:activator>
            <v-list-item two-line>
              <v-list-item-content>
                <v-list-item-title>自然属性</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
          <v-row dense>
            <v-col
              cols="4"
              sm="3"
              md="2"
              v-for="(natural_property, i) in NaturalPropertyList"
              :key="i"
            >
              <v-checkbox
                v-model="selNaturalProperties[i]"
                :label="natural_property"
                hide-details
              ></v-checkbox>
            </v-col>
          </v-row>
        </v-list-group>
      </v-list>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="primary" @click.stop="onSave">保存</v-btn>
      <v-btn
        color="primary"
        :disabled="!item.id"
        :loading="downloading"
        @click.stop="onSave"
        >生成报告书</v-btn
      >
    </v-card-actions>
  </v-card>
</template>

<script>
  import ReportUserInfo from "@/components/report/ReportUserInfo"
  import ReportTargetSelector from "@/components/fingerconfig/ReportTargetSelector"
  import FingerClassifyEnumSelector from "@/components/fingerconfig/FingerClassifyEnumSelector"
  import { FingerReportManual } from "@/store/models/report_manual"
  import { LearnTraitEnum, LearnTypeEnum, NaturalPropertyEnum } from "@/store/models/finger_config"

  export default {
    name: "ReportEdit",
    components: {
      ReportTargetSelector,
      ReportUserInfo,
      FingerClassifyEnumSelector,
    },
    data: () => ({
      report: FingerReportManual.createNewReport(),
      downloading: false,
      LearnTraitList: LearnTraitEnum,
      LearnTypeList: LearnTypeEnum,
      NaturalPropertyList: NaturalPropertyEnum,
      selNaturalProperties: new Array(NaturalPropertyEnum.length),
    }),

    async created() {
      if (this.$route.query.report_id) {
        // get from backend
        this.report = await FingerReportManual.getById(
          this.$route.query.report_id
        )
      } else {
        this.report = FingerReportManual.createNewReport()
      }
      this.setNaturalProperties(this.report.report_info.natural_properties)
    },

    computed: {
      item: {
        get() {
          return this.report.report_info
        },
        set(value) {
          this.report.report_info = value
        },
      },
      TRC() {
        const quant_values = this.item.finger_inputs.map((x) =>
          Number(x.quant_value)
        )
        return quant_values.reduce((a, b) => a + b, 0)
      },
      leftTRCPercent() {
        // 左脑比例应该用右手的
        const quant_values = this.item.finger_inputs
          .filter((x) => x.handside == "right")
          .map((x) => Number(x.quant_value))
        const right_sum = quant_values.reduce((a, b) => a + b, 0)
        const percent = (right_sum / this.TRC) * 100
        return (Math.round(percent * 100) / 100).toFixed(2)
      },
      rightTRCPercent() {
        const percent = 100 - this.leftTRCPercent
        return (Math.round(percent * 100) / 100).toFixed(2)
      },
    },

    watch: {
      selNaturalProperties: {
        handler: function () {
          this.report.report_info.natural_properties =
            this.getNaturalProperties()
        },
      },
      deep: true,
    },

    methods: {
      setNaturalProperties(natural_properties) {
        for (let i = 0; i < NaturalPropertyEnum.length; i++) {
          const cur_natural_property = NaturalPropertyEnum[i]
          if (natural_properties.includes(cur_natural_property)) {
            this.selNaturalProperties[i] = true
          } else {
            this.selNaturalProperties[i] = false
          }
        }
      },
      getNaturalProperties() {
        let natural_properties = []
        for (let i = 0; i < NaturalPropertyEnum.length; i++) {
          const cur_natural_property = NaturalPropertyEnum[i]
          if (this.selNaturalProperties[i]) {
            natural_properties.push(cur_natural_property)
          }
        }
        return natural_properties
      },

      getAdditionalPotentailLabel(class_name) {
        let className = ""
        if (class_name == "class_broken") {
          className = "断掌"
        } else {
          className = class_name.split("_")[1]
        }
        return "附加潜能" + className + ":"
      },

      getLearnSenstive(atd_value) {
        //先天潜能学习敏感度数值：
        // 正常：40°——50°之间，代表学习领悟能力良好、情绪认知能力正常；
        // 敏感：35°——40°之间，代表学习领悟能力极快、情绪认知能力敏感；
        // 偏慢：50°——60°之间，代表学习领悟能力偏慢、情绪认知能力迟缓；
        // 特殊：0°，代表学习领悟能力极为敏感，情绪认知能力极为敏感；不喜欢的领域学习领悟能力极为缓慢，情绪认知能力极为迟缓；动机和情绪将影响学习情况。
        let sense_value = ""
        if (atd_value < 35) {
          sense_value = "特殊"
        } else if (atd_value < 40) {
          sense_value = "敏感"
        } else if (atd_value < 50) {
          sense_value = "正常"
        } else {
          sense_value = "偏慢"
        }
        let text = `先天潜能学习敏感度：${atd_value}度，${sense_value}`
        return text
      },

      getLearnTraitLabel(){
        if(this.item.target=='学龄教育'){
          return '先天学习特质'
        }else if(this.item.target=='职场分析'){
          return '先天工作特质'
        }else{
          return '先天学习特质'
        }
      },

      async onSave() {
        this.report = await this.report.createOrUpdate()
        this.$dialog.notify.info("保存成功")
        this.$router.replace({
          name: "FingerReportManualEditor",
          query: { report_id: this.report.id },
        })
      },

      async genReport() {
        this.downloading = true
        await this.report.downloadReport()
        this.downloading = false
      },
    },
  }
</script>
